<template>
  <div class="order">
    <p class="title">订单信息</p>
    <p class="detail">
      <label>订单号码</label>
      <span>{{item.order_sn}}</span>
    </p>
    <p class="detail">
      <label>下单时间</label>
      <span>{{item.create_time}}</span>
    </p>
    <p class="detail" v-if="item.status == 2 && item.update_time">
      <label>取消时间</label>
      <span>{{item.update_time}}</span>
    </p>
    <p class="detail">
      <label>配送地址</label>
      <span>{{address}}</span>
    </p>
  </div>
</template>

<script>
export default {
    props: ["item"],
    computed: {
      address() {
        let address = `${this.item.contact_province}${this.item.contact_city}${this.item.contact_dist}`
        if (this.item.contact_street) {
          return `${address}${this.item.contact_street}`
        } else {
          return `${address}${this.item.street}`
        }
      }
    },
};
</script>

<style lang="less" scoped>
.order {
  width: 92vw;
  margin: 3vw auto;
  padding: 4vw;
  background: #fff;
  font-size: 3.8vw;
  .title {
    color: #333;
  }
  p {
    margin-bottom: 2vw;
    display: flex;
    label {
      color: #999;
      display: inline-block;
      width: 20vw;
    }
    span {
      display: inline-block;
      color: #333;
      width: 60vw;
    }
  }
}
</style>